<template>
  <div class="managerMana-container common-container">
    <div class="common-top">
      <span class="left title">容器模板</span>
      <el-button type="primary" size="small" @click="doModify('add')"
                 v-if="hasPerm('template:template:edit')">
        添加模板
      </el-button>
    </div>
    <div class="common-bot" v-if="hasPerm('template:template:list')">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="名称" width="150px">
          <template slot-scope="scope">
            <div style="font-size:20px">{{ scope.row.name }}</div>
            <!--            <el-dropdown trigger="click" style="cursor: pointer" @command="(cmd)=>handleClientClick(cmd, scope.row)">-->
            <!--              <span class="el-dropdown-link" style="color: #1e6abc">-->
            <!--                部署到服务器<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
            <!--              </span>-->
            <!--              <el-dropdown-menu slot="dropdown">-->
            <!--                <el-dropdown-item v-for="(client,idx) in clients"-->
            <!--                                  :disabled="!client.connected || (idx+1)>accountLimit.docker" :command="client.id">-->
            <!--                  {{ client.name }} [IP:{{ client.ip }}] ({{ client.alias }})-->
            <!--                  <span v-if="client.clientUsage">CPU：{{-->
            <!--                      client.clientUsage.cpuUsage-->
            <!--                    }}% 内存：{{ client.clientUsage.memory.usage }}% 硬盘：{{ client.clientUsage.hardDrive.usage }}%</span>-->
            <!--                </el-dropdown-item>-->
            <!--              </el-dropdown-menu>-->
            <!--            </el-dropdown>-->
            <div>
            <span
              class="span-modify edit"
              @click.stop="handleClientClick(scope.row)" style="color: #1e6abc">部署到服务器</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="image" label="镜像">
          <template slot-scope="scope">
            <div>{{ scope.row.image }}</div>
            <div>{{ scope.row.description }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="分类" width="200px">
          <template slot-scope="scope">
            <div>{{ scope.row.category }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          width="100px"
          label="操作"
          v-if="hasPerm('template:template:edit', 'template:template:del')"
        >
          <template slot-scope="scope">
            <span
              class="span-modify edit"
              v-if="hasPerm('template:template:edit') && isMyData(scope.row.createBy)"
              @click.stop="doModify('edit', scope.row)"
            >编辑</span>
            <span
              class="span-modify del"
              v-if="hasPerm('template:template:del') && isMyData(scope.row.createBy)"
              @click.stop="doModify('del', scope.row)"
            >删除</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          v-if="showPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="nowPage"
          :page-size="limit"
          layout="total, prev, pager, next"
          :total="totalElement"
        ></el-pagination>
      </div>
    </div>
    <Modify
      ref="modify"
      @close="close"/>
    <el-dialog title="部署到服务器" :visible.sync="dialogFormVisible">
      <el-form :model="form" label-width="100px">
        <el-form-item label="目标服务器">
          <el-select v-model="form.clientId" placeholder="请选择要部署的服务器" style="width: 60%">
            <el-option v-for="(client,idx) in clients" :label="client.name" :value="client.id"
                       :disabled="!client.connected || (idx+1)>accountLimit.docker" :command="client.id">
              {{ client.name }} [IP:{{ client.ip }}] ({{ client.alias }})
              <span v-if="client.clientUsage">CPU：{{
                  client.clientUsage.cpuUsage
                }}% 内存：{{ client.clientUsage.memory.usage }}% 硬盘：{{ client.clientUsage.hardDrive.usage }}%</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部署类型">
          <el-radio-group size="mini" v-model="form.type" style="margin-left: 10px">
            <el-radio-button label="container">容器</el-radio-button>
            <el-radio-button label="serve">容器服务</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="gotoPublish">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import Api from "@/api/index";
import Briefly from "@/layout/components/Briefly";
import Modify from "./modify.vue";

export default {
  components: {Briefly, Modify},
  computed: {
    ...mapGetters(["accountLimit"]),
  },
  data() {
    return {
      showPage: false,
      tableData: [],
      enable: 0,
      keyword: "",
      limit: 100,
      nowPage: 1,
      gender: {
        female: "女",
        male: "男",
      },
      totalElement: 0,
      clients: [],
      dialogFormVisible: false,
      form: {
        templateId: "",
        clientId: "",
        type: "container",
      }
    };
  },
  watch: {
    nowPage(val) {
      this.getData();
      this.setStateData(val);
    },
    limit(val) {
      this.getData();
    },
  },
  methods: {
    gotoPublish() {
      this.dialogFormVisible = false
      switch (this.form.type) {
        case "container":
          this.$router.push({path: `/client/${this.form.clientId}/edit/0`, query: {templateId: this.form.templateId}})
          break;
        case "serve":
          this.$router.push({
            path: `/client/${this.form.clientId}/serve/edit/0`,
            query: {templateId: this.form.templateId}
          })
          break;
      }
    },
    handleClientClick(template) {
      this.form.templateId = template.id;
      this.dialogFormVisible = true
    },
    close() {
      this.getData();
    },
    //
    setStateData(nowPage) {
      let stateData = {
        nowPage,
      };
      this.$router.replace({
        path: this.$route.path,
        query: {
          stateData: this.$base64.encode(JSON.stringify(stateData)),
        },
      });
    },
    handleSizeChange(val) {
      this.limit = val;
    },
    handleCurrentChange(val) {
      this.nowPage = val;
    },
    doModify(type, item = null) {
      switch (type) {
        case "add":
          this.$refs.modify.show();
          break;
        case "edit":
          this.$refs.modify.show(item.id)
          break;
        case "enable":
          Api.dockerTemplate.enable({
            targetId: item.id,
            yes: !!item.enable,
          }).then((res) => {
            if (res.code == 200) {
              this.$message.success("操作成功");
              this.getData();
            }
          }).catch((e) => this.getData());
          break;
        case "del":
          this.$confirm("确认此操作?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              Api.dockerTemplate.del({targetIds: [item.id]}).then((res) => {
                if (res.code == 200) {
                  this.$message.success("操作成功");
                  this.getData();
                }
              });
            })
            .catch((e) => this.getData());
          break;
      }
    },
    toModify(type) {
      this.$router.push({name: "managerModify", query: {type}});
    },
    getData() {
      Api.dockerTemplate
        .list({
          enable: this.enable,
          keyword: this.keyword,
          limit: this.limit,
          page: this.nowPage - 1,
        })
        .then((res) => {
          this.tableData = res.data;
          this.totalElement = res.total;
          this.showPage = true;
        });
    },
  },
  mounted() {
    Api.dockerClient.all().then((res) => {
      this.clients = res.data;
    });
    if (this.$route.query.stateData) {
      console.log(JSON.parse(this.$base64.decode(this.$route.query.stateData)));
      const stateData = JSON.parse(
        this.$base64.decode(this.$route.query.stateData)
      );
      this.nowPage = stateData.nowPage;
      this.getData();
    } else {
      this.getData();
    }
  },
};
</script>

<style lang="scss" scoped></style>
